import React, { Component } from 'react'

class Search extends Component {
  constructor (props) {
    super (props)
    this.keywordsInput = this.keywordsInput.bind(this)
    this.state = {
      keywords: '',
      jobs: [{
        id: 1,
        name: 'Marketing (市场)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Marketing (市场)'
      }, {
        id: 2,
        name: 'Internet (互联网)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Internet (互联网)'
      }, {
        id: 3,
        name: 'Assistant (助理)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Assistant (助理)'
      },{
        id: 4,
        name: 'Accounting (会计)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Accounting (会计)'
      }, {
        id: 5,
        name: 'Finance (财务)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Finance (财务)'
      }, {
        id: 6,
        name: 'Banking (银行)',
        link: 'http://job.lockinchina.com/job/search?jobType=1&searchWords=Banking (银行)'
      }]
    }
  }
  keySearch () {
    let key = this.state.keywords;
    window.location = 'http://job.lockinchina.com/job/search?jobType=1&searchWords='+key
  }
  keywordsInput (keywords) {
    console.log(keywords.target.value)
    let key = keywords.target.value
    this.setState(() => ({
      keywords: key
    }))
  }
  render () {
    return (
      <div className="search-team">
        <div className="search-body">
          <input maxLength="50" onChange = {(e) => this.keywordsInput(e)} type="text" placeholder="Search the key word" /> 
          <button onClick={this.keySearch.bind(this)}>Search</button>
        </div>
        <h4>最热职位速度直达：</h4>
        <div className="jobs-label">
          {
            this.state.jobs.map((item) => {
              return (
                <a href={ item.link} key={item.id}>{item.name}</a>
              )
            })
          }
        </div>
      </div>
    )
  }

  

}

export default Search